<template>
	<view class="voice-input">
		<view class="btn-text">{{text}}</view>
		<image :class="isRecording?'recording':''" @longpress="longPress" @touchmove="touchMove" @touchend="touchEnd" class="voice-btn" src="/page_other/static/voice-btn.png"></image>
		<image @click="hide" class="pack-up" src="/page_other/static/down-arrows.png"></image>
		<view class="record-modal" v-if="popupToggle" @longpress="longPress" @touchmove="touchMove" @touchend="touchEnd">
			<view class="wrapper"><view class="modal-loading"></view></view>
			<view class="modal-title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	export default{
		name:'VoiceInput',
		data(){
			return{
				text:'按住说话',
				popupToggle:false,
				title:'',
				startPoint: 0,
				notShow: false,
				isShow: true,
				recordTime: 0,
				recordTimer: null,
				isRecording: false,
				canSend: true,
			}
		},
		beforeMount() {	
			this.recorderManager = uni.getRecorderManager();
			this.recorderManager.onStop(res => {
				let msg = {
					duration: res.duration ? res.duration : this.recordTime * 1000,
					tempFilePath: res.tempFilePath,
					fileSize: res.fileSize ? res.fileSize : ((48 * this.recordTime) / 8) * 1024
				};
				uni.hideLoading();
				if (this.canSend) {
					if (msg.duration < 1000) {
						uni.showToast({
							title: '录音时间太短',
							icon: 'none'
						});
					} else {
						uni.showLoading({
							title:'正在识别',
							mask:true
						})
						uni.uploadFile({
							url:config.requestUrl+'/api/form/voiceMatching',
							filePath:res.tempFilePath,
							header: { "Content-Type": "multipart/form-data" },
							name:'file',
							success: (e) => {
								uni.hideLoading()
								let data=JSON.parse(e.data);
								if(data.code==200){
									this.$emit('discern',data.data)
								}else{
									this.showToast(data.msg)
								}
							},
							fail:()=> {
								uni.hideLoading()
								this.showToast('录音上传失败')
							}
						})
					}
				}
				this.startPoint=0
				this.popupToggle=false
				this.isRecording=false
				this.canSend=true
				this.title=''
				this.text='按住说话'
			});
		},
		methods:{
			hide(){
				this.$emit('hide')
			},
			longPress(e) {
				this.recorderManager.start({
					duration: 60000,
					// 录音的时长，单位 ms，最大值 600000（10 分钟）
					sampleRate: 44100,
					// 采样率
					numberOfChannels: 1,
					// 录音通道数
					encodeBitRate: 192000,
					// 编码码率
					format: 'aac' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
				});
				this.startPoint=e.touches[0]
				this.title='正在录音'
				this.notShow=true
				this.isShow=false
				this.isRecording=true
				this.popupToggle=true
				this.recordTime=0;
				this.text='抬起停止'
				this.recordTimer = setInterval(() => {
					this.recordTime++;
					if(this.recordTime==50){
						uni.vibrateLong()
					}
					if(this.recordTime>=50){
						this.text=`${60-this.recordTime}后停止录音`
					}
				}, 1000);
			},
			touchMove(e) {
				if (this.isRecording) {
					if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 100) {
						this.text='抬起停止';
						this.title='松开手指，取消识别'
						this.canSend=false
					} else if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 20) {
						this.text='抬起停止'
						this.title='上划可取消'
						this.canSend=true
					} else {
						this.text='抬起停止'
						this.title='正在录音'
						this.canSend=true
					}
				}
			},
			touchEnd() {
				this.startPoint=0
				this.popupToggle=false
				this.isRecording=false
				this.title=' '
				this.text='按住说话'
				clearInterval(this.recordTimer);
				uni.hideLoading();
				this.recorderManager.stop();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.voice-input{
		height: 400rpx;
		z-index: 999;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		.btn-text{
			color: #767676;
			font-size: 28rpx;
			position: absolute;
			transform: translate(-50%,-50%);
			left: 50%;
			top: 21%;
		}
		.voice-btn{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			position: absolute;
			transform: translate(-50%,-50%);
			left: 50%;
			top: 54%;
		}
		.voice-btn.recording{
			animation: recording 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite alternate;
		}
		@keyframes recording{
			0% {
				box-shadow: 0 0 0 0 rgba(0,0,0,0);
			}
			50% {
				box-shadow: 0 0 0 10px rgba(15, 125, 255, .3);
			}
			100% {
				box-shadow: 0 0 0 15px rgba(15, 125, 255, .3);
			}
		}
		.pack-up{
			width: 46rpx;
			height: 52rpx;
			position: absolute;
			transform: translate(-50%,-50%);
			left: 22%;
			top: 50%;
		}
		.record-modal {
			height: 300rpx;
			width: 60vw;
			background-color: #000;
			opacity: 0.8;
			position: fixed;
			top: 300rpx;
			z-index: 9999;
			left: 20vw;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
		}
		.record-modal .wrapper {
			display: flex;
			height: 200rpx;
			box-sizing: border-box;
			padding: 10vw;
		}
		
		.record-modal .wrapper .modal-loading {
			opacity: 1;
			width: 40rpx;
			height: 16rpx;
			border-radius: 4rpx;
			background-color: #006fff;
			animation: loading 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
		}
		
		.modal-title {
			text-align: center;
			color: #fff;
		}
		@keyframes loading {
			0% {
				transform: translate(0, 0)
			}
		
			50% {
				transform: translate(30vw, 0);
				background-color: #f5634a;
				width: 40px;
			}
		
			100% {
				transform: translate(0, 0);
			}
		}
	}
</style>